    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>立体导航栏</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                position: relative;
                width:1300px;
                height: 50px;
                margin: 100px auto;
                /*font-size:0;*/
                /*background:#00FF00;*/
                text-align: center;
                list-style: none;
            }
            ul li{

                float: left;
                /*display: inline-block;*/
                height: 100%;
                width: 260px;
                text-align: center;
                line-height: 50px;
                font-size:0;
            }
            ul li span{
                display: inline-block;
                line-height: 50px;
                font-size: 16px;
            }
            span.left{

                width: 60px;
                height: 50px;
                background-color: #00FF00;
                line-height: 50px;
                transform-origin: left;
            }
            span.right{

                width: 60px;
                height: 50px;
                background-color: #00FF00;
                line-height: 50px;
                transform-origin: right;
                /*transform: skew(0,30deg);*/
            }
            span.center{

                background: #f52f4c;
                width: 140px;
                height: 50px;
                /*transform: translateY(-45px);*/
            }
            li:hover span.left{
                transform: skew(0,-30deg);
            }
            li:hover span.right{
                transform: skew(0,30deg);
            }
            li:hover span.center{
                transform: translateY(-36px);
                text-shadow: 3px 3px #777777;
                box-shadow: 10px 40px 5px -5px #cccccc;
            }
            ul::before,ul::after{
                content: "";
                position: absolute;
                left: -30px;
                top: 0;
                background: #00FF00;
                width: 30px;
                height: 50px;
            }
            ul::after{
                left: auto;
                right: -30px;
            }
        </style>
    </head>
    <body>
    <ul>

        <li>
            <span class="left">Left</span>
            <span class="center">Center</span>
            <span  class="right"> Right</span>
        </li>
        <li>
            <span class="left">Left</span>
            <span class="center">Center</span>
            <span  class="right"> Right</span>
        </li>
        <li>
            <span class="left">Left</span>
            <span class="center">Center</span>
            <span  class="right"> Right</span>
        </li>
        <li>
            <span class="left">Left</span>
            <span class="center">Center</span>
            <span  class="right"> Right</span>
        </li>
        <li>
            <span class="left">Left</span>
            <span class="center">Center</span>
            <span  class="right"> Right</span>
        </li>
    </ul>
    </body>
    </html>